<template>
  <div class="bg-white shadow-md rounded">
    <table class="text-left w-full border-collapse">
      <thead>
        <tr class="bg-primary text-white font-bold text-base border-b border-grey-light">
          <th class="px-1 py-1 lg:py-4 lg:px-6 lg:w-6/12 w-4/12">文件名</th>
          <th class="px-1 py-1 lg:py-4 lg:px-6 lg:w-2/12 text-center">文件大小</th>
          <th class="px-1 py-1 lg:py-4 lg:px-6 lg:w-3/12 text-center">时间</th>
          <th class="px-1 py-1 lg:py-4 lg:px-6 lg:w-1/12 text-center">下载</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.name" class="border-b border-grey-light text-sm">
          <td class="px-1 my-1 lg:py-4 lg:px-6 line-clamp-1">{{ file.name }}</td>
          <td class="px-1 py-1 lg:py-4 lg:px-6 text-center">{{ file.size }}</td>
          <td class="px-1 py-1 lg:py-4 lg:px-6 text-center">{{ file.time }}</td>
          <td class="px-1 py-1 lg:py-4 lg:px-6 text-center"><a href="#" class="text-blue-500">下载</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { name: "昆仑通态触摸屏 N系列资料下载", size: "1 KB", time: "2022-01-01" },
        { name: "昆仑通态触摸屏 N系列资料下载", size: "100 KB", time: "2022-01-02" },
        // 更多文件...
      ],
    };
  },
};
</script>
